<template>
  <el-dialog
    class="public-dialog"
    :title="title"
    width="720"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div>
      <Upload
        label="税金单文件"
        require
        :modelValue="fileList"
        @update:modelValue="handleInput"
        :limit="20"
        accept=".jpg,.jpeg,.png,.pdf"
      >
      </Upload>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import Upload from "@/components/Upload/index.vue";
import { vatUpdate } from "../../api/index.js";
import { getImportUrl } from "@/api/public";
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  title: { type: String, default: "上传税金单" },
});
const { id } = toRefs(props);
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
const loading = ref();
const fileList = ref([]);
const handleInput = (val) => {
  fileList.value = val;
};
const handleSave = async () => {
  try {
    if (!fileList.value?.length) return ElMessage.warning("请先导入文件!");
    console.log(fileList.value);
    let files = fileList.value.map(item=>item.response)
    const { code, message } = await vatUpdate({
      files
    });
    if (code !== 200) {
      ElMessage.warning(message);
      return;
    }
    ElMessage.success("导入成功!");
    handleClose(true);
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleClose = async (refresh) => {
  fileList.value = [];
  await nextTick();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
